<template>
	<view class="activity">
		<mescroll-body
			ref="mescrollRef" 
			@init="mescrollInit" 
			@down="downCallback" 
			@up="upCallback" 
			@emptyclick="emptyClick"
			:down="downOption"
			:up="upOption"

		>
			<view class="list">
				<view class="item" v-for="(item, index) in list" :key="index">
					<!-- 订单id -->
					<view class="flex align-between vertical-center fn-25 fn-w list-item" style="padding-bottom: 20rpx;">
						<view class="flex vertical-center">
							<text class="icon-text color-red mr-15" style="font-size: 30rpx;font-weight: 100"></text>
							<text>订单ID</text>
						</view>
						<view>{{item.sn}}</view>
					</view>
					<!-- 订单信息 -->
					<view class="mt-30 flex align-between vertical-center fn-25 mb-25">
						<view>
							<text class="mr-15">{{item.c_name}}</text>
							<text>{{item.total_hour}}</text>
						</view>
						<view>
							<text class="mr-15">名师</text>
							<text>{{item.t_name}}</text>
						</view>
					</view>
					<view class="flex align-between v fn-22 mb-25">
						<text>{{item.s_name}}</text>
						<view style="width: 300rpx; line-height: 26rpx;">{{item.address}}</view>
					</view>
					<view class="flex align-between fn-22 list-item" style="padding-bottom: 25rpx;">
						<text>上课时间</text>
						<text>{{item.c_date}}</text>
					</view>
					<!-- 金额 -->
					<view class="flex align-between mt-30 mb-25 fn-22 ">
						<text>消费金额</text>
						<text>￥{{item.price}}</text>
					</view>
					<view class="flex align-between fn-22">
						<text>消费时间</text>
						<text>{{item.pay_time}}</text>
					</view>
					<view style="display: flex;justify-content: flex-end;margin-top: 30rpx;">
						<v-button v-if="item.status == 1" :width="200" :height="60" @onclick="onRefund(item.id)">
							<text style="font-size: 30rpx;">申请退款</text>
						</v-button>
						<view v-if="item.status == 2" style="font-size: 30rpx;color: red;">退款中</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import UserApi from "@/api/user.js"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import vButton from "@/components/button/button.vue";
	import { toast, alert } from "@/utils/alert.js"
	
	export default {
		mixins: [MescrollMixin],
		components: {
			vButton
		},
		data() {
			return {
				list: [],
				// 下拉刷新的常用配置
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
					native: false,
				},
				// 上拉加载的常用配置
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					// 缺省配置
					empty: {
						btnText: "去首页看看"
					}
				},
			};
		},
		onShow() {
			this.mescroll && this.mescroll.resetUpScroll();
		},
		methods:{
			// 下拉刷新回调
			downCallback() {
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll();
			},
			// 
			async upCallback(page) {
				const res = await UserApi.GetOrderList({page: page.num})
				console.log(res)
				if(page.num == 1) this.list = []; //如果是第一页需手动置空列表
				this.list = this.list.concat(res.list); //
				this.mescroll.endBySize(res.list.length, res.total)
			},
			emptyClick() {
				uni.switchTab({
					url: "/pages/tab/home/home"
				})
			},
			// 
			onRefund(id) {
				this.onGoNext(`/pages/personage/refund/refund?id=${id}`);
			}
		}
	}
</script>

<style lang="scss">
		.list{
			padding: 26rpx;
			padding-bottom: calc(env(safe-area-inset-bottom) + 26rpx);
			.item{
				background-color: $color-white;
				padding: 20rpx 25rpx;
				border-radius: 5rpx;
				box-shadow: 3rpx 3rpx 1-rpx rgba(#000, .2);
				margin-bottom: 30rpx;
			}
		}
		.pupop-cont{
			padding: 30rpx;
			width: 660rpx;
			box-sizing: border-box;
			.title{
				text-align: center;
				font-size: 30rpx;
				font-weight: bold;
				color: #000;
			}
			.textarea{
				width: 100%;
				height: 400rpx;
				font-size: 28rpx;
				margin: 30rpx 0;
				margin-bottom: 50rpx;
				padding: 20rpx;
				background-color: #eee;
				box-sizing: border-box;
			}
		}
</style>
